<template>
  <List @gotoDetail="onGotoDetail"></List>
  <el-drawer v-if="listWithDetailDraw" v-model="showDrawDetail" :close-on-click-modal="false" :close-on-press-escape="false" :title="title" direction="rtl" custom-class="detail-drawer-wrap" :before-close="handleClose" destroy-on-close>
    <section class="detail-wrap">
      <Detail @confirm="handleClose" @cancel="handleClose" :detail-id="detailId"></Detail>
    </section>
  </el-drawer>
</template>
<script lang="ts" setup>
import { onMounted, reactive, ref, computed } from 'vue'
import List from './list.vue'
import Detail from './detail.vue'
const listWithDetailDraw = true
const detailId = ref('')
const showDrawDetail = ref(false)
function onGotoDetail(id?: string) {
  detailId.value = id
  if (listWithDetailDraw) {
    showDrawDetail.value = true
  } else {
    console.log('???')
  }
}

const title = computed(() => {
  return detailId.value ? '编辑' : '新建'
})

function handleClose() {
  showDrawDetail.value = false
}
</script>
<style lang="less"></style>
